import { Form, Input, Button, Row, Col, Select, message } from "antd";
import React from "react";

const FormItem = Form.Item;

const TeacherForm = (props) => {
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const gutter = {
    xs: 8,
    sm: 16,
    md: 24,
    lg: 32,
  };

  const onFinish = (values) => {
    //提交表单时，通过values属性获取表单元素值
    if (props.values) {
      //编辑表单，回传value
      const data = { id: 0 };
      data["id"] = props.values.id;
      props.handleUpdate(values);
      props.onUpdSubmit();
    } else {
      props.handleAdd(values);
      props.onAddSubmit();
    }
  };

  //从列表点击编辑打开form时，通过initialValues回传需要编辑的内容
  return (
    <div>
      <Form
        {...layout}
        initialValues={props.values}
        style={{ width: 650 }}
        onFinish={onFinish}
      >
        <Row gutter={gutter}>
          <Col span={9}>
            <FormItem
              className="name"
              style={{ width: 300 }}
              label="姓名"
              name="name"
              rules={[
                { required: true, message: "请输入姓名!" },
                {
                  required: true,
                  max: 20,
                  whitespace: true,
                  message: "姓名不能超过20个字符长度！",
                },
              ]}
            >
              <Input placeholder="请在此输入姓名" allowClear />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={gutter}>
          <Col span={9}>
            <FormItem label={"性别"} name="gender">
              <Select
                style={{ width: 180 }}
                options={[
                  {
                    value: 1,
                    label: "男",
                  },
                  {
                    value: 2,
                    label: "女",
                  },
                ]}
              />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={gutter}>
          <Col span={9}>
            <FormItem
              className="tel"
              style={{ width: 300 }}
              label="手机号"
              name="phone"
              rules={[
                {
                  required: true,
                  min: 11,
                  whitespace: true,
                  message: "请输入11位数电话号码",
                },
                {
                  required: true,
                  pattern: /^[0-9]+$/,
                  message: "请输入数字",
                },
              ]}
            >
              <Input placeholder="请在此输入手机号" allowClear />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={gutter}>
          <Col span={9}>
            <FormItem
              className="name"
              style={{ width: 300 }}
              label="邮箱"
              name="email"
              rules={[
                {
                  required: true,
                  whitespace: true,
                  pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,
                  message: "请输入正确的 email 格式",
                },
              ]}
            >
              <Input placeholder="请在此输入邮箱" allowClear />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={gutter}>
          <Col span={9}>
            <FormItem
              className="description"
              label="描述"
              style={{ width: 300 }}
              name="description"
              rules={[
                {
                  required: true,
                  whitespace: true,
                  message: "请输入描述，包括擅长领域等介绍",
                },
              ]}
            >
              <Input placeholder="请在此输入个人介绍" allowClear />
            </FormItem>
          </Col>
        </Row>
        <FormItem>
          <Button htmlType="submit" type="primary">
            Submit
          </Button>
        </FormItem>
      </Form>
    </div>
  );
};

export default TeacherForm;
